<template>
  <div id="app1">
    <img src="../../../../../public/600.png" alt="Banner Image" class="banner-image" />
    <Header/>
<div class="container">
  <div class="left">
    <div v-if="currentPage === 1">
      <h2>新中国经济社会发展成就</h2>
      <ul>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202107/t20210717_5348112.html">中华人民共和国国民经济和社会发展第十四个五年规划和2035年远景目标</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202411/t20241104_5798461.html">新质生产力赋能高质量发展：理论逻辑、现实考验与实践路径</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202409/t20240923_5786211.html">武力：新中国经济发展的成就与启示</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202406/t20240603_5756481.html">李文|中国式现代化的开端：工业化道路的选择</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202408/t20240827_5773997.html">“一带一路”新十年：中国经济与全球发展</a></li>
        <li><a href="#">中国式现代化进程中推动经济高质量发展的演进逻辑</a></li>
        <li><a href="#">东北振兴二十年历程与新时代推动东北全面振兴</a></li>
        <li><a href="#">郑有贵|工农城乡赋能：由强调单向作用向互促互补拓展</a></li>
        <li><a href="#">关于“社会主义工业化”概念演变的历史考察（1949—1966）</a></li>
        <li><a href="#">乡村振兴视域下中国农村发展模式探索：安徽凤阳小岗村经验与启示</a></li>
        <li><a href="#">武力|“四千四万”精神：中国式现代化中的农民贡献</a></li>
        <li><a href="#">建设农业强国：战略导向、目标定位与路径选择</a></li>
        <li><a href="#">中国式城镇化新道路的历史逻辑与辩证逻辑</a></li>
        <li><a href="#">走共同富裕的中国式现代化道路：历史进程及经验启示</a></li>
        <li><a href="#">中国共产党领导国家中心城市建设的进程、逻辑及经验</a></li>
        <li><a href="#">邓小平中国式的现代化道路实现共同富裕思想的当代价值</a></li>
        <li><a href="#">习近平新时代中国特色社会主义经济思想的原创性贡献</a></li>
        <li><a href="#">建设社会主义现代化国家目标话语的历史演变 </a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202107/t20210717_5348112.html">新时代十年中国收入分配制度改革的回顾与瞻望</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202411/t20241104_5798461.html">1950—1953年北京实施劳资协商会议制度的历史考察</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202409/t20240923_5786211.html">新中国铁路管理制度建构述论</a></li>
      </ul>
    </div>
    <div v-if="currentPage === 2">
      <h2>经济制度史</h2>
      <ul>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202107/t20210717_5348112.html">新时代十年中国收入分配制度改革的回顾与瞻望</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202411/t20241104_5798461.html">1950—1953年北京实施劳资协商会议制度的历史考察</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202409/t20240923_5786211.html">新中国铁路管理制度建构述论</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202406/t20240603_5756481.html">中国式现代化视域中的经济改革与制度建构</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202408/t20240827_5773997.html">郭旭红 武力：从五年计划（规划）指标演变看中国式现代化的独特优势</a></li>
        <li><a href="#">一九五三年统购统销政策在广东的落地及影响</a></li>
        <li><a href="#">科技革命视域下中国式工业现代化的发展战略与实践路径</a></li>
        <li><a href="#">“下楼出院”到现场“三结合”：三线建设中的“设计革命”</a></li>
        <li><a href="#">潘万历：推动农民农村实现共同富裕的制约因素与路径探索</a></li>
        <li><a href="#">改革开放前后两个历史时期工业发展的关联性</a></li>
        <li><a href="#">改革开放以来农村基本经营制度创新的路径、绩效与经验</a></li>
        <li><a href="#">王丹莉：“三五”时期区域发展格局下的央地财政关系</a></li>
        <li><a href="#">新时代我国完善基本经济制度的实践探索与经验启示</a></li>
        <li><a href="#">中国特色社会主义市场经济制度的形成及其治理智慧</a></li>
        <li><a href="#">新中国成立以来基本经济制度形成发展的理论逻辑与实践逻辑</a></li>
        <li><a href="#">从分税到分成：政府间税收划分的理论逻辑与实践逻辑  </a></li>
        <li><a href="#">党探索社会主义市场经济体制的历程、经验及支撑性制度建设</a></li>
        <li><a href="#">中国居民收入分配体系：演变、特征与展望</a></li>
        <li><a href="#">中国式现代化进程中推动经济高质量发展的演进逻辑</a></li>
        <li><a href="#">东北振兴二十年历程与新时代推动东北全面振兴</a></li>
        <li><a href="#">郑有贵|工农城乡赋能：由强调单向作用向互促互补拓展</a></li>
      </ul>
    </div>
    <div v-if="currentPage === 3">
      <h2>区域经济史</h2>
      <ul>
        <img src="../../../../../public/613.png" class="tu">
        <li><a href="#">资源集聚与城市再造——156项工程建设时期上海与洛阳的共振</a></li>
        <li><a href="#">西北地区三线建设项目征地补偿问题研究（1964—1979）</a></li>
        <li><a href="#">中国式现代化进程中推动经济高质量发展的演进逻辑</a></li>
        <li><a href="#">东北振兴二十年历程与新时代推动东北全面振兴</a></li>
        <li><a href="#">郑有贵|工农城乡赋能：由强调单向作用向互促互补拓展</a></li>
        <li><a href="#">关于“社会主义工业化”概念演变的历史考察（1949—1966）</a></li>
        <li><a href="#">川渝地区三线建设企业区位选择及其对当地经济的影响</a></li>
        <li><a href="#">追求稳定与发展：1949—1950年天津郊区的土地改革研究</a></li>
      </ul>
    </div>
    <div v-if="currentPage === 4">
      <h2>行业经济史</h2>
      <ul>
        <img src="../../../../../public/620.jpg" class="tu">
        <li><a href="#">科技革命视域下中国式工业现代化的发展战略与实践路径</a></li>
        <li><a href="#">“下楼出院”到现场“三结合”：三线建设中的“设计革命”</a></li>
        <li><a href="#">中国共产党领导国家中心城市建设的进程、逻辑及经验</a></li>
        <li><a href="#">邓小平中国式的现代化道路实现共同富裕思想的当代价值</a></li>
        <li><a href="#">习近平新时代中国特色社会主义经济思想的原创性贡献</a></li>
        <li><a href="#">建设社会主义现代化国家目标话语的历史演变 </a></li>
        <li><a href="#">潘万历：推动农民农村实现共同富裕的制约因素与路径探索</a></li>
        <li><a href="#">改革开放前后两个历史时期工业发展的关联性</a></li>
      </ul>
    </div>
    <div v-if="currentPage === 5">
      <h2>人口资源与环境变迁史</h2>
      <ul>
        <img src="../../../../../public/619.jpg" class="tu">
        <li><a href="#">段娟：中国特色荒漠化防治道路的探索历程与经验启示</a></li>
        <li><a href="#">中国户籍制度改革：历程回顾、改革估价和趋势判断</a></li>
        <li><a href="#">中国居民收入分配体系：演变、特征与展望</a></li>
        <li><a href="#">中国式现代化进程中推动经济高质量发展的演进逻辑</a></li>
        <li><a href="#">东北振兴二十年历程与新时代推动东北全面振兴</a></li>
        <li><a href="#">郑有贵|工农城乡赋能：由强调单向作用向互促互补拓展</a></li>
        <li><a href="#">新中国70年生态环境保护实践进展：由污染治理向生态补偿的演变</a></li>
        <li><a href="#">新中国70年的人口政策变迁与当代人口发展</a></li>
      </ul>
    </div>
    <div v-if="currentPage === 6">
      <h2>经济思想史</h2>
      <ul>
        <img src="../../../../../public/621.jpg" class="tu">
        <li><a href="#">中国共产党领导国家中心城市建设的进程、逻辑及经验</a></li>
        <li><a href="#">邓小平中国式的现代化道路实现共同富裕思想的当代价值</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202107/t20210717_5348112.html">新时代十年中国收入分配制度改革的回顾与瞻望</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202411/t20241104_5798461.html">1950—1953年北京实施劳资协商会议制度的历史考察</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202409/t20240923_5786211.html">新中国铁路管理制度建构述论</a></li>
        <li><a href="http://hprc.cssn.cn/gsyj/jjs/jgzhn/202408/t20240827_5773997.html">郭旭红 武力：从五年计划（规划）指标演变看中国式现代化的独特优势</a></li>
        <li><a href="#">习近平新时代中国特色社会主义经济思想的原创性贡献</a></li>
        <li><a href="#">建设社会主义现代化国家目标话语的历史演变 </a></li>
      </ul>
    </div>
    <div class="pagination">
      <span @click="changePage(1)">首页</span>
      <span @click="changePage(prevPage)">上一页</span>
      <span v-for="page in totalPages" :key="page" @click="changePage(page)">
        {{ page }}
      </span>
      <span @click="changePage(nextPage)">下一页</span>
      <span @click="changePage(totalPages)">尾页</span>
    </div>
  </div>
  
  <div class="right">
    <div class="zong">
<h2><img src="../../../../../public/622.jpg" class="bian"></h2>
<ul>
  <li><a href="#">姜辉:百年大党跳出历史周期率的成功道路</a></li>
  <li><a href="#">宋月红:新时代十年的伟大变革具有里...</a></li>
  <li><a href="#">欧阳雪梅:坚定文化自信</a></li>
  <li><a href="#">郑有贵:着力解决“三农”问题推动乡...</a></li>
  <li><a href="#">学习党的十九届六中全会精神笔谈</a></li>
  <li><a href="#">中国式现代化新道路:历程、特征和意义</a></li>
  <li><a href="#">张金才:既一脉相承又与时俱进一觉…</a></li>
  <li><a href="#">当代中国研究所:为全面建成社会主义...</a></li>
  <li><a href="#">宋月红章舜粤:壮丽史诗全景展现</a></li>
  <li><a href="#">徐轶杰:邓力群与《关于建国以来党的…</a></li>
  <li><a href="#">姜辉:感悟思想伟力汲取奋进力量</a></li>
  <li><a href="#">朱佳木:矢志践行初心使命让我们党永...</a></li>
  <li><a href="#">郑有贵:脱贫攻坚伟大实践孕育中国特...</a></li>
  <li><a href="#">钟瑛:坚持和发展中国特色社会主义</a></li>
  <li><a href="#">姜辉:新时代呼唤马克思主义哲学的创...</a></li>
  <li><a href="#">钟瑛:新发展阶段的发展主题是实现高...</a></li>
  <li><a href="#">从“十三五”到“十四五”看党的新发…</a></li>
  <li><a href="#">国外一些政党及政要如何看待中国共产…</a></li>
  <li><a href="#">谭扬芳:锲而不舍推进马克思主义中国化</a></li>
  <li><a href="#">宋月红:“一个都不能少”的庄严承诺...</a></li>
  <li><a href="#">潘娜:在伟大建党精神照耀下踏上新的征程</a></li>
  <li><a href="#">孙翠萍:凝聚新格局下香港发展新动力</a></li>
  <li><a href="#">吴超:中国共产党百年伟大实践的历史经验</a></li>
</ul>
</div>
</div>
</div>
<Footer/>
</div>
</template>

<script>
import Header from '@/modules/module6/module6-zongshu/components/Header.vue';
import Footer from '@/modules/module6/module6-zongshu/components/Footer.vue';
export default {
components: {
  Header,
  Footer
},
name: 'Events',
data() {
  return {
    currentPage: 1,
    totalPages: 6, 
    showLeftAd: true,
    showRightAd: true,
    images: [
      '../../../../../public/623.jpg',
    ],
    currentImageIndex: 0
  };
},
computed: {
  prevPage() {
    return Math.max(1, this.currentPage - 1);
  },
  nextPage() {
    return Math.min(this.totalPages, this.currentPage + 1);
  }
},
methods: {
  changePage(page) {
    if (typeof page === 'string') {
      if (page === '首页' || page === '尾页') {
        this.currentPage = 1;
      } else if (page === '上一页') {
        this.currentPage = this.prevPage;
      } else if (page === '下一页') {
        this.currentPage = this.nextPage;
      } else {
        this.currentPage = parseInt(page, 10);
      }
    } else {
      this.currentPage = page;
    }
  }
}
}

</script>

<style scoped>
.container {
background-color: #fff;
display: flex;
justify-content: space-between;
margin-bottom: 42px;
}
.tu{
width: 400px;
height: 241px;
}
.left, .right {
flex: 1;
padding: 20px;
}

.left {
margin-top: -25px;
margin-left: 100px;
border: 1px solid rgb(193, 235, 255);
background-color: rgba(255, 255, 255, 0.733);
margin-right: 30px;
}

.left h2 {
background-color: #cdf3fa;
color: rgb(114, 114, 114);
}
.left ul li{
text-align: left;
}
.left ul li a{
text-decoration: none;
color: #484b4d;
}
.left ul li a:hover{
color: #2473c3;
}
.right {
margin-top: -5px;
margin-right: 100px;
border: 1px solid rgb(239, 239, 239);
background-color: #d4e9f2;
}
.zong{
background-color: #fff;
}
.bian{
text-align: left;
width: 90px;
height: 25px;
}
.right ul li a {
text-decoration: none; /* 去除下划线 */
color: #000; /* 设置默认颜色为黑色 */
}

.right ul li a:hover {
color: #2473c3; /* 设置悬浮时的颜色为深蓝色 */
}
.right h2, .right ul {
background-color: white;
}

.pagination {
margin-top: 20px;
text-align: center;
}

.pagination span {
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
}

.pagination span:hover {
background-color: #f0f0f0;
color: #fff;
}
.zi{
text-align: center;
}
.slider {
position: fixed;
bottom: 0;
right: 0; /* 紧挨着right div */
width: 200px; /* 根据需要设置宽度 */
overflow: hidden; /* 隐藏超出部分 */
}

.slide {
width: 100%; /* 图片宽度设置为100% */
animation: slideUp 10s infinite; /* 调用动画 */
}

@keyframes slideUp {
0% {
  transform: translateY(100%); /* 从底部开始 */
}
100% {
  transform: translateY(-100%); /* 滑到顶部 */
}
}


</style>